<template>
  <div class="cate-index">
    <div class="container">
      <!-- 侧边栏 -->
      <div class="aside">
        <van-badge-group :active-key="activeKey" @change="handleChange">
          <van-badge
            v-for="item of topList"
            :key="item.id"
            :title="item.categoryName"/>
        </van-badge-group>
      </div>
      <!-- 对应内容区域 -->
      <div class="content">
        <div class="item" v-for="item of secList" :key="item.id">
          <img :src="'http://localhost:3000' + item.brandLogo" alt="">
          <p>{{item.brandName}}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mobile } from '@/api'
export default {
  name: 'CateIndex',
  data () {
    return {
      activeKey: 0,
      // 侧边栏数据
      topList: [],
      // 第二级数据
      secList: []
    }
  },
  mounted () {
    // 初始化一级二级列表
    this.getTopList(this.getSecList)
  },
  methods: {
    // 分类标签点击事件
    handleChange (index) {
      this.activeKey = index
      let id = this.topList[index].id
      this.getSecList(id)
    },
    // 初始化分类数据
    getTopList (cb) {
      mobile.getTopCate().then(res => {
        // console.log(res)
        this.topList = res.data.rows
        // 调用回调，渲染二级列表
        cb && cb(this.topList[0].id)
      }).catch(err => {
        console.log(err)
      })
    },
    // 获取二级列表数据
    getSecList (id) {
      mobile.getSecCate({ id }).then(res => {
        // console.log(res)
        this.secList = res.data.rows
      }).catch(err => {
        console.log(err)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/styles/variables.scss';
.cate-index {
  padding-top: 46px;
  // padding-bottom: 50px;
  .container {
    display: flex;
    .aside {
      width: 20%;
      .van-badge-group {
        .van-badge {
          padding: 15px;
        }
      }
    }
    .content {
      flex: 1;
      overflow: hidden;
      .item {
        float: left;
        width: 33.33%;
        text-align: center;
        padding: 5px;
        font-size: 12px;
        color: $grayColor;
        background-color: #fff;
        img {
          display: block;
        }
      }
    }
  }
}
</style>
